<template>
  <div>
    <div class="nav">
      <mt-button size="small" @click.native.prevent="active = 'tab-container1'"
        >发生次数</mt-button
      >
      <mt-button size="small" @click.native.prevent="active = 'tab-container2'"
        >能量监测</mt-button
      >
      <mt-button size="small" @click.native.prevent="active = 'tab-container3'"
        >破坏类型</mt-button
      >
      <mt-button size="small" @click.native.prevent="active = 'tab-container4'"
        >严重程度</mt-button
      >
      <mt-button size="small" @click.native.prevent="active = 'tab-container5'"
        >台站工况</mt-button
      >
    </div>

    <div class="page-tab-container">
      <mt-tab-container
        class="page-tabbar-tab-container"
        v-model="active"
        swipeable
      >
        <mt-tab-container-item id="tab-container1">
          <!-- 发生次数vxe-table组件 -->
          <vxe-table
            border
            resizable
            show-footer
            ref="xTable"
            height="800"
            align="center"
            :footer-method="footerMethod"
            :data="tableData"
          >
            <vxe-colgroup title="发生次数统计">
              <vxe-column field="a" title="日期" width="50%"></vxe-column>
              <vxe-column field="b" title="发生次数" width="50%"></vxe-column>
            </vxe-colgroup>
          </vxe-table>
        </mt-tab-container-item>

        <mt-tab-container-item id="tab-container2">
          <!-- 能量检测vxe-table组件 -->
          <vxe-table
            border
            resizable
            show-footer
            ref="xTable"
            height="800"
            align="center"
            :footer-method="footerMethod"
            :data="tableData"
          >
            <vxe-colgroup title="能量监测">
              <vxe-table-column
                field="a"
                title="日期"
                width="50%"
              ></vxe-table-column>
              <vxe-table-column
                field="c"
                title="能量大小"
                width="50%"
              ></vxe-table-column>
            </vxe-colgroup>
          </vxe-table>
        </mt-tab-container-item>

        <mt-tab-container-item id="tab-container3">
          <!-- 破坏类型vxe-table组件 -->
          <vxe-table
            border
            resizable
            show-footer
            ref="xTable"
            height="800"
            align="center"
            :footer-method="footerMethod"
            :data="tableData"
          >
            <vxe-colgroup title="破坏类型">
              <vxe-table-column
                field="a"
                title="日期"
                min-width="90px"
              ></vxe-table-column>
              <vxe-table-column
                field="d"
                title="剪切"
                min-width="90px"
              ></vxe-table-column>
              <vxe-table-column
                field="e"
                title="张拉"
                min-width="90px"
              ></vxe-table-column>
              <vxe-table-column
                field="f"
                title="混合"
                min-width="90px"
              ></vxe-table-column>
            </vxe-colgroup>
          </vxe-table>
        </mt-tab-container-item>

        <mt-tab-container-item id="tab-container4">
          <!-- vxe-table严重程度组件 -->
          <vxe-table
            border
            resizable
            show-footer
            ref="xTable"
            height="800"
            align="center"
            :footer-method="footerMethod"
            :data="tableData"
          >
            <vxe-colgroup title="严重程度">
              <vxe-column field="a" title="日期" min-width="95px"></vxe-column>
              <vxe-column field="g" title="严重" min-width="95px"></vxe-column>
              <vxe-column field="h" title="一般" min-width="95px"></vxe-column>
              <vxe-column field="i" title="轻微" min-width="95px"></vxe-column>
            </vxe-colgroup>
          </vxe-table>
        </mt-tab-container-item>

        <mt-tab-container-item id="tab-container5">
          <!-- 台站工况vxe-table组件 -->
          <vxe-table
            border
            resizable
            show-footer
            ref="xTable"
            height="800"
            align="center"
            :footer-method="footerMethod"
            :data="tableData"
          >
            <vxe-colgroup title="台站工况">
              <vxe-column field="a" title="日期" min-width="72px"></vxe-column>
              <vxe-column field="j" title="盘符" min-width="72px"></vxe-column>
              <!--              <vxe-column field="k" title="位置"></vxe-column>-->
              <vxe-column field="l" title="状态" min-width="72px"></vxe-column>
              <vxe-column field="m" title="存储" min-width="72px"></vxe-column>
              <vxe-column field="n" title="网速" min-width="72px"></vxe-column>
            </vxe-colgroup>
          </vxe-table>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</template>

<script>
export default {
  name: "MtTabTest",
  data() {
    return {
      active: "tab-container1",
      tableData: [],
    };
  },
  created() {
    this.TabloadList();
  },
  methods: {
    TabloadList() {
      const list = [];
      for (let index = 0; index < 15; index++) {
        list.push({
          a: "a" + index,
          b: index,
          c: "10" + "^" + index + "J",
          d: index,
          e: index,
          f: index,
          g: index,
          h: index,
          i: index,
          j: index,
          // k:index,
          l: index,
          m: index,
          n: index,
        });
        this.tableData = list;
      }
    },
    footerMethod({}) {
      return [];
    },
  },
};
</script>

<style lang="css" scoped>
.nav {
  padding: 10px;
}
</style>